<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catalog-Z Bootstrap 5.0 HTML Template</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css" charset="utf-8">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
</head>
<body>
<script>

</script>
<!--头部-->
<div id="header"></div>
<!--搜索-->

<div class="container-fluid tm-container-content tm-mt-60">
    <div class="row mb-4">
        <h2 class="col-6 tm-text-primary" id="searchImg">
            Collection ranking
        </h2>
        <div class="col-6 d-flex justify-content-end align-items-center">
            <form action="" class="tm-text-primary">
                Page <SPAN  value="1" size="1"  id="totalCountSpan">1</SPAN> of <span id="totalPageSpan">200</span>
            </form>
        </div>
    </div>
    <div class="row tm-mb-90 tm-gallery" id="img_loader">
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-03.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Clocks</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">18 Oct 2020</span>-->
        <!--                <span>9,906 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-04.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Plants</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">14 Oct 2020</span>-->
        <!--                <span>16,100 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-05.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Morning</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">12 Oct 2020</span>-->
        <!--                <span>12,460 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-06.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Pinky</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">10 Oct 2020</span>-->
        <!--                <span>11,402 views</span>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-01.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Hangers</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">24 Sep 2020</span>-->
        <!--                <span>16,008 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-02.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Perfumes</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">20 Sep 2020</span>-->
        <!--                <span>12,860 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-07.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Bus</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">16 Sep 2020</span>-->
        <!--                <span>10,900 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-08.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>New York</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">12 Sep 2020</span>-->
        <!--                <span>11,300 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-09.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Abstract</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">10 Sep 2020</span>-->
        <!--                <span>42,700 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-10.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Flowers</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">8 Sep 2020</span>-->
        <!--                <span>11,402 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-11.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Rosy</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">4 Sep 2020</span>-->
        <!--                <span>32,906 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-12.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Rocki</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">28 Aug 2020</span>-->
        <!--                <span>50,700 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-13.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Purple</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">22 Aug 2020</span>-->
        <!--                <span>107,510 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-14.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Sea</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">14 Aug 2020</span>-->
        <!--                <span>118,006 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-15.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Turtle</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">9 Aug 2020</span>-->
        <!--                <span>121,300 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-16.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Peace</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">3 Aug 2020</span>-->
        <!--                <span>21,204 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
    <!-- row -->
    <div class="row tm-mb-90" id="pageUl">
        <div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">
            <a href="javascript:void(0);" class="btn btn-primary tm-btn-prev mb-2 disabled">Previous</a>
            <div class="tm-paging d-flex">
                <a href="javascript:void(0);" class="active tm-paging-link">1</a>
                <a href="javascript:void(0);" class="tm-paging-link">2</a>
                <a href="javascript:void(0);" class="tm-paging-link">3</a>
                <a href="javascript:void(0);" class="tm-paging-link">4</a>
            </div>
            <a href="javascript:void(0);" class="btn btn-primary tm-btn-next">Next Page</a>
        </div>
    </div>
</div>
<!--尾部-->
<footer id="footer"></footer>

<script src="js/plugins.js"></script>
<script>
    $(window).on("load", function () {

        $('body').addClass('loaded');
        $.get("header.html", function (data) {
            $("#header").html(data);
        });
        $.get("footer.html", function (data) {
            $("#footer").html(data);
        });
        $.post("/photograph/photo/findByFavorite",{},
            function (data) {
                // 1.更新数据  共x页y条
                $("#totalCountSpan").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                // 2.拼接数据
                $div=$("#img_loader");
                var divList='';
                for(var i = 0; i < data.list.length; i++) {
                    var div='<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="'+data.list[i].isrc+'" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>'+data.list[i].iname+'</h2>\n' +
                        '                    <a onclick="reading('+data.list[i].iid+')" href="photo-detail.html?iid='+data.list[i].iid+'">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">'+data.list[i].idate+'</span>\n' +
                        '                <span>'+data.list[i].favoriteNum+' favorite</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    divList+=div;
                }
                $div.html(divList);
                // 3.拼接页码
                var start = data.currentPage - 5;
                var end = data.currentPage +4 ;
                if (start<1){
                    start = 1 ;
                    end = 10 ;
                }
                if (end>data.totalPage){
                    end = data.totalPage;
                    start = end - 9 ;
                }
                if (data.totalPage<10){
                    start = 1;
                    end = data.totalPage;
                }
                $pageUl = $("#pageUl");
                var pageList = '<div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">';
                var prePage = data.currentPage - 1;
                if (prePage < 1) {
                    prePage = 1;
                }
                pageList+=' <a href="javascript:load('+prePage+')" class="btn btn-primary tm-btn-prev mb-2 ">Previous</a>\n';
                //页码
                pageList+='<div class="tm-paging d-flex">';
                for (var i = start; i <= end; i++) {
                    if (i == data.currentPage) {
                        pageList += '<a href="javascript:load('+i+');" class="active tm-paging-link">'+i+'</a>';
                    } else {
                        pageList += '<a href="javascript:load('+i+');" class="tm-paging-link">'+i+'</a>';
                    }
                }
                pageList +='</div>';
                //下一页
                var nextPage = data.currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage;
                }
                pageList += '<a href="javascript:load('+nextPage+');" class="btn btn-primary tm-btn-next">Next Page</a>';
                pageList += '</div>';
                $pageUl.html(pageList);
            },"json");

    });

/*    function search(currentPage) {
        var iname =$("#search_input").val();
        $.post("/photograph/search/searchImg",{iname:iname,currentPage: currentPage},
            function (data) {
                // 1.更新数据  共x页y条
                $("#totalCountSpan").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                // 2.拼接数据
                $div=$("#img_loader");
                var divList='';
                for(var i = 0; i < data.list.length; i++) {
                    var div='<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="'+data.list[i].isrc+'" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>'+data.list[i].iname+'</h2>\n' +
                        '                    <a onclick="reading('+data.list[i].iid+')" href="photo-detail.html?iid='+data.list[i].iid+'">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">'+data.list[i].idate+'</span>\n' +
                        '                <span>'+data.list[i].iclick+' views</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    divList+=div;
                }
                $div.html(divList);
                // 3.拼接页码
                var start = data.currentPage - 2;
                var end = data.currentPage +2 ;
                if (start<1){
                    start = 1 ;
                    end = 5 ;
                }
                if (end>data.totalPage){
                    end = data.totalPage;
                    start = end - 4 ;
                }
                if (data.totalPage<5){
                    start = 1;
                    end = data.totalPage;
                }


                $pageUl = $("#pageUl");

                var pageList = '<div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">';


                var prePage = data.currentPage - 1;
                if (prePage < 1) {
                    prePage = 1;
                }
                pageList+=' <a href="javascript:search('+prePage+')" class="btn btn-primary tm-btn-prev mb-2 ">Previous</a>\n';
                //页码
                pageList+='<div class="tm-paging d-flex">';
                for (var i = start; i <= end; i++) {
                    if (i == data.currentPage) {
                        pageList += '<a href="javascript:search('+i+');" class="active tm-paging-link">'+i+'</a>';
                    } else {
                        pageList += '<a href="javascript:search('+i+');" class="tm-paging-link">'+i+'</a>';
                    }
                }
                pageList +='</div>';
                //下一页
                var nextPage = data.currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage;
                }
                pageList += '<a href="javascript:search('+nextPage+');" class="btn btn-primary tm-btn-next">Next Page</a>';
                pageList += '</div>';
                $pageUl.html(pageList);
            },"json");
    }*/
    function load(currentPage) {
        $.post("/photograph/photo/findByFavorite",{currentPage: currentPage},
            function (data) {
                // 1.更新数据  共x页y条
                $("#totalCountSpan").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                // 2.拼接数据
                $div=$("#img_loader");
                var divList='';
                for(var i = 0; i < data.list.length; i++) {
                    var div='<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="'+data.list[i].isrc+'" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>'+data.list[i].iname+'</h2>\n' +
                        '                    <a onclick="reading('+data.list[i].iid+')" href="photo-detail.html?iid='+data.list[i].iid+'">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">'+data.list[i].idate+'</span>\n' +
                        '                <span>'+(data.list[i].favoriteNum)+' favorite</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    divList+=div;
                }
                $div.html(divList);
                // 3.拼接页码
                var start = data.currentPage - 2;
                var end = data.currentPage +2 ;
                if (start<1){
                    start = 1 ;
                    end = 5 ;
                }
                if (end>data.totalPage){
                    end = data.totalPage;
                    start = end - 4 ;
                }
                if (data.totalPage<5){
                    start = 1;
                    end = data.totalPage;
                }


                $pageUl = $("#pageUl");

                var pageList = '<div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">';


                var prePage = data.currentPage - 1;
                if (prePage < 1) {
                    prePage = 1;
                }
                pageList+=' <a href="javascript:load('+prePage+')" class="btn btn-primary tm-btn-prev mb-2 ">Previous</a>\n';
                //页码
                pageList+='<div class="tm-paging d-flex">';
                for (var i = start; i <= end; i++) {
                    if (i == data.currentPage) {
                        pageList += '<a href="javascript:load('+i+');" class="active tm-paging-link">'+i+'</a>';
                    } else {
                        pageList += '<a href="javascript:load('+i+');" class="tm-paging-link">'+i+'</a>';
                    }
                }
                pageList +='</div>';
                //下一页
                var nextPage = data.currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage;
                }
                pageList += '<a href="javascript:load('+nextPage+');" class="btn btn-primary tm-btn-next">Next Page</a>';
                pageList += '</div>';
                $pageUl.html(pageList);
            },"json");
    }
    function reading(iid) {
        $.post("/photograph/read/reading",{iid:iid},function (data) {

        },"json")
    }
</script>
</body>
</html>